<template>
    <div class="evaluate-info">
        <div class="evaluate-user">
            <img :src="userimg" alt="" class="user-img">
            <span class="user-name">{{username}}</span>
            <span class="user-grade"><i class="icon-star" v-for="n in 5"></i></span>
        </div>
        <div class="evaluate-content">
            <p>{{ content }}</p>
        </div>
        <div class="evaluate-footer"><span>{{ date }}</span></div>
    </div>
</template>
<script>
    export default{
        props:["userimg","username","content","date","starNum"],
        mounted(){
            var el = $(this.$el)
            var stars = el.find(".icon-star")
            for(var i=0;i<this.starNum;i++){
                stars.eq(i).addClass("star-active")
            }
        }
    }
</script>
<style lang="scss">
    /*EvaluateInfo.vue*/
    @import '../assets/css/function.scss';
    .evaluate-info{
        background-color:#fff;
        padding:pxToRem(20px) pxToRem(10px) pxToRem(10px);
        border-top:1px solid #ddd;
        font-family:"微软雅黑";
        .evaluate-user{
            .user-img{
                width:pxToRem(60px);
                height:pxToRem(60px);
                border-radius:50%;
            }
            .user-name{
                position:absolute;
                height:pxToRem(60px);
                line-height:pxToRem(60px);
                left:pxToRem(80px);
                font-size:pxToRem(16px);
            }
            .user-grade{
                font-size:pxToRem(14px);
                position:absolute;
                left:pxToRem(130px);
                height:pxToRem(60px);
                line-height:pxToRem(60px);
                color:#ccc;
                .star-active{
                    color:rgba(249,129,3,1);
                }
            }
        }
        .evaluate-content{
            font-size:pxToRem(12px);
            p{
                padding:10px;
            }
        }
        .evaluate-footer{
            font-size:pxToRem(12px);
            color:#aaa;
            overflow:hidden;
            span{
                float:right;
            }

        }
    }

</style>